<script type="text/jsx">
import http from '../utils/Xsync';

export default {
    name: 'Test',
    data() {
        return { data: '', serviceData: '' };
    },
    created() {
    },
    mounted() {
    },
    methods: {
        fetchMock() {
            http({
                method: 'POST',
                originResponse: true,
                url: '/saasFrame/getpersonbyuserId'
                // eslint-disable-next-line no-return-assign
            }).then((r) => this.data = JSON.stringify(r, null, 2));
        },
        fetchService() {
            http({
                method: 'POST',
                originResponse: true,
                url: '/api/fms/EMS_SaaS_Web/Spring/MVC/entrance/unifier/getPersonByUserNameService'
                // eslint-disable-next-line no-return-assign
            }).then((r) => this.serviceData = JSON.stringify(r, null, 2));
        }
    },
    render(h) {
        return <div class="helloWord">
            <div class="mock-el text-align-left">
                <h5>mock测试 <button onClick={this.fetchMock}>请求自定义mock数据</button></h5>
                <div class="d-flex">
                    <span>数据:</span>
                    <pre class="flex-grow-1">
                        {this.data || '暂无数据'}
                    </pre>
                </div>
                <h5>mock测试 <button onClick={this.fetchService}>请求真实运维平台数据</button></h5>
                <div class="d-flex">
                    <span>数据:</span>
                    <pre class="flex-grow-1">
                        {this.serviceData || '暂无数据'}
                    </pre>
                </div>
            </div>
        </div>;
    }
};
</script>

<style lang="less">
    .tip {
        width: 100px;
        height: 30px;
        line-height: 30px;
        //border: 1px solid rgb(245, 129, 127);
        border-radius: 4px;
        position: relative;
        background-color: #fff;
        filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
        /*&::before {*/
        /*    content: "";*/
        /*    width: 0;*/
        /*    height: 0;*/
        /*    border-style: solid;*/
        /*    border-width: 0 10px 10px 10px;*/
        /*    border-color: transparent transparent #fff transparent;*/
        /*    position: absolute;*/
        /*    top: -10px;*/
        /*    left: 0;*/
        /*    right: 0;*/
        /*    margin: auto;*/
        /*    z-index: 2;*/
        /*}*/
        &::after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #fff transparent;
            position: absolute;
            top: -11px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 1;
        }
    }

    .text-align-left{
      text-align: left;
    }

    h5{
      border-bottom: thin solid black;
      padding: 10px 1px;
    }

    .d-flex{
      display: flex;

      .flex-grow-1{
        flex-grow: 1;
        flex-shrink: 0;
      }
    }

</style>
